<div class="content-section implementation GridDemo clearfixes borrow" >

  <form *ngIf="viewState ==='apply' " [formGroup]="inventoryborrowForm"  >
    <p-panel >
      <p-header>
        <div class="ui-helper-clearfix">
          <span class="ui-panel-title" style="font-size:16px;display:inline-block;margin-top:2px"></span>
          <button  pButton type="button"  label="返回" (click)="goBack()" [ngStyle]="{'width':'100px'}" ></button>
          <button  pButton type="submit" [ngStyle]="{'float':'right','width':'100px'}" label="保存" (click)="formSave()"   ></button>
          <button  pButton type="submit" [ngStyle]="{'float':'right','width':'100px'}" label="提交" (click)="formSubmit()" ></button>
        </div>
      </p-header>
      <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px" >
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-1 text-right">
            <label >借用单号:</label>
          </div>
          <div class="ui-grid-col-5">
            <input formControlName="sid" name="sid"  type="text" pInputText   placeholder="自动生成" readonly  />
          </div>
          <div class="ui-grid-col-1 text-right">
            <label>申请类型:</label>
          </div>
          <div class="ui-grid-col-5">
            <p-dropdown formControlName="type"  [options]="statusNames" [autoWidth]="false" name="cycle"  [(ngModel)]="submitData.type"  readonly="true"></p-dropdown>
          </div>
        </div>
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-1 text-right">
            <label >借用人:</label>
          </div>
          <div class="ui-grid-col-5">
            <input formControlName="people"  type="text" pInputText  name="allowed"
                   readonly class="cursor_not_allowed"   value="{{personalData.name}}" />
          </div>
          <div class="ui-grid-col-1 text-right">
            <label >部门名称:</label>
          </div>
          <div class="ui-grid-col-5">
            <input  formControlName="inspectiondepartment" type="text" pInputText  name="inspectiondepartment" placeholder="自动生成"
                    readonly class="cursor_not_allowed"  [(ngModel)]="submitData.org"/>
          </div>

        </div>
        <div class="ui-grid-row margin-bottom-1vw" formGroupName="timeGroup">
          <div class="ui-grid-col-1 text-right">
            <label ><span>*</span>借用时间:</label>
          </div>
          <div class="ui-grid-col-5">
            <p-calendar
              formControlName="startTime"
              [showIcon]="true"
              [locale]="zh"
              [styleClass]="'schedule-add'"
              dateFormat="yy-mm-dd"
              [required]="true"
              dataType="string"
              [minDate]="nowDate"

              [(ngModel)]="submitData.create_time" >
            </p-calendar>
            <div [hidden]="inventoryborrowForm.get(['timeGroup','startTime']).valid||inventoryborrowForm.get(['timeGroup','startTime']).untouched">
              <div class="ui-message ui-messages-error ui-corner-all"  [hidden]="!inventoryborrowForm.hasError('required',['timeGroup','startTime'])">
                <i class="fa fa-close"></i>
                借用时间必填
              </div>
            </div>
          </div>
          <div class="ui-grid-col-1 text-right">
            <label ><span>*</span>归还时间:</label>
          </div>
          <div class="ui-grid-col-5">
            <p-calendar
              formControlName="endTime"
              [showIcon]="true" [locale]="zh" name="return_time"
              [styleClass]="'schedule-add'" dateFormat="yy-mm-dd" [required]="true" dataType="string"
              [minDate]="nowDate" [(ngModel)]="submitData.return_time"
            >
            </p-calendar>
            <div [hidden]="inventoryborrowForm.get(['timeGroup','endTime']).valid||inventoryborrowForm.get(['timeGroup','endTime']).untouched">
              <div class="ui-message ui-messages-error ui-corner-all"  [hidden]="!inventoryborrowForm.hasError('required',['timeGroup','endTime'])" >
                <i class="fa fa-close"></i>
                归还时间必填
              </div>
            </div>
            <div class="ui-message ui-messages-error ui-corner-all"  *ngIf="inventoryborrowForm.hasError('time','timeGroup')" >
              <i class="fa fa-close"></i>
              {{inventoryborrowForm.getError('time','timeGroup')?.descxxx}}
            </div>
          </div>
        </div>
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-1 text-right">
            <label > <span>*</span>借用原因:</label>
          </div>
          <div class="ui-grid-col-11">
            <textarea formControlName="remarks"  name="remarks" pInputTextarea type="text" [(ngModel)]="submitData.remarks" ></textarea>
            <div class="ui-message ui-messages-error ui-corner-all"  *ngIf="!inventoryborrowForm.controls['remarks'].valid&&(!inventoryborrowForm.controls['remarks'].untouched)" >
              <i class="fa fa-close"></i>
              借用原因必填
            </div>
          </div>
        </div>
      </div>
    </p-panel>
    <label></label>
    <div class="ui-grid-row margin-bottom-1vw" >
      <div class="ui-grid-col-2 ui-g-offset-10 text-right">
        <button pButton type="button" label="移除" (click)="deleteStorage()" [ngStyle]="{'width':'100px'}" [disabled]="selectInsepections.length===0 || selectInsepections.length >1" ></button>
        <button pButton  type="button" (click)="showBorrowItemsMask()" [ngStyle]="{'width':'100px'}" label="物品选择" ></button>
      </div>
    </div>
  </form>
  <form  *ngIf="viewState === 'update' "  >
    <p-panel >
      <p-header>
        <div class="ui-helper-clearfix">
          <span class="ui-panel-title" style="font-size:16px;display:inline-block;margin-top:2px"></span>
          <button  pButton type="button"  label="返回" (click)="goBack()" [ngStyle]="{'width':'100px'}" ></button>
          <button  pButton type="submit" [ngStyle]="{'float':'right','width':'100px'}" label="保存" (click)="formSave()" label="保存"   ></button>
          <button  pButton type="submit" [ngStyle]="{'float':'right','width':'100px'}" label="提交" (click)="formSubmit()" ></button>
        </div>
      </p-header>
      <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px" >
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-1 text-right">
            <label >借用单号:</label>
          </div>
          <div class="ui-grid-col-5">
            <input  name="sid"  type="text" pInputText    readonly  value="{{borrowData?.sid}}" />
          </div>
          <div class="ui-grid-col-1 text-right">
            <label >申请类型:</label>
          </div>
          <div class="ui-grid-col-5">
            <p-dropdown  [options]="statusNames" [autoWidth]="false" name="cycle"  [(ngModel)]="submitData.type"  readonly="true" ></p-dropdown>
          </div>
        </div>
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-1 text-right">
            <label >借用人:</label>
          </div>
          <div class="ui-grid-col-5">
            <input  type="text" pInputText  name="allowed"
                    readonly class="cursor_not_allowed" value="{{personalData.name}}"/>
          </div>
          <div class="ui-grid-col-1 text-right">
            <label >部门名称:</label>
          </div>
          <div class="ui-grid-col-5">
            <input type="text" pInputText  name="inspectiondepartment"
                   readonly class="cursor_not_allowed"  value="{{borrowData.org}}"/>
          </div>

        </div>
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-1 text-right">
            <label ><span>*</span>借用时间:</label>
          </div>
          <div class="ui-grid-col-5">
            <p-calendar
              [showIcon]="true"
              [minDate]="nowDate"
              [locale]="zh"
              name="create_time"
              [styleClass]="'schedule-add'"
              dateFormat="yy-mm-dd"
              [required]="true"
              dataType="string"
              [minDate]="minDate"
              (onSelect) = "startTimeSelected(beginTime)"
              [(ngModel)]="borrowData.create_time" >
            </p-calendar>
            <div [hidden]="inventoryborrowForm.get(['timeGroup','startTime']).valid||inventoryborrowForm.get(['timeGroup','startTime']).untouched">
              <div class="ui-message ui-messages-error ui-corner-all"  [hidden]="!inventoryborrowForm.hasError('required',['timeGroup','startTime'])">
                <i class="fa fa-close"></i>
                借用时间必填
              </div>
            </div>
          </div>
          <div class="ui-grid-col-1 text-right">
            <label ><span>*</span>归还时间:</label>
          </div>
          <div class="ui-grid-col-5">

            <p-calendar   [showIcon]="true" [locale]="zh" name="return_time"
                          [styleClass]="'schedule-add'" dateFormat="yy-mm-dd" [required]="true" dataType="string"
                          [minDate]="minDate" [(ngModel)]="borrowData.return_time"
            >
            </p-calendar>
          </div>
        </div>
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-1 text-right">
            <label > <span>*</span>借用原因:</label>
          </div>
          <div class="ui-grid-col-11">
            <textarea  name="remarks" pInputTextarea type="text" [(ngModel)]="borrowData.remarks"></textarea>
          </div>
        </div>
      </div>
    </p-panel>
    <label></label>
    <div class="ui-grid-row margin-bottom-1vw" *ngIf="viewState!=='someReturn'">
      <div class="ui-grid-col-2 ui-g-offset-10 text-right">
        <button pButton type="button" label="移除" (click)="updatedeleteStorage()" [ngStyle]="{'width':'100px'}" [disabled]="selectInsepections.length===0 || selectInsepections.length >1" *ngIf="viewState !== 'viewDetail'"></button>
        <button pButton   (click)="showBorrowItemsMask()" [ngStyle]="{'width':'100px'}" label="物品选择" *ngIf="viewState !== 'viewDetail'"></button>
      </div>
    </div>
  </form>
  <form *ngIf="viewState === 'viewDetail' " >
    <p-panel >
      <p-header>
        <div class="ui-helper-clearfix">
          <span class="ui-panel-title" style="font-size:16px;display:inline-block;margin-top:2px"></span>
          <button  pButton type="button"  label="返回" (click)="goBack()" [ngStyle]="{'width':'100px'}" ></button>

        </div>
      </p-header>
      <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px" >
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-2 text-right">
            <label >借用单号:</label>
          </div>
          <div class="ui-grid-col-3">
            <input  name="sid"  type="text" pInputText    readonly  value="{{borrowData?.sid}}"  />
          </div>
          <div class="ui-grid-col-2 text-right">
            <label >申请类型:</label>
          </div>
          <div class="ui-grid-col-3">
            <p-dropdown  [options]="statusNames" [autoWidth]="false" name="cycle"  [(ngModel)]="submitData.type"  readonly="true" ></p-dropdown>
          </div>
        </div>
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-2 text-right">
            <label >借用人:</label>
          </div>
          <div class="ui-grid-col-3">
            <input  type="text" pInputText  name="allowed"
                    readonly class="cursor_not_allowed" value="{{personalData.name}}"  />
          </div>
          <div class="ui-grid-col-2 text-right">
            <label >部门名称:</label>
          </div>
          <div class="ui-grid-col-3">
            <input  type="text" pInputText  name="inspectiondepartment"
                    readonly class="cursor_not_allowed" [(ngModel)]="submitData.org" />
          </div>

        </div>
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-2 text-right">
            <label ><span>*</span>借用时间:</label>
          </div>
          <div class="ui-grid-col-3">
            <input   type="text" pInputText  name="create_times"
                     readonly class="cursor_not_allowed"  [(ngModel)]="borrowData.create_time"/>
          </div>
          <div class="ui-grid-col-2 text-right">
            <label ><span>*</span>归还时间:</label>
          </div>
          <div class="ui-grid-col-3">

            <input  type="text" pInputText  name="return_time"
                    readonly class="cursor_not_allowed"  [(ngModel)]="borrowData.return_time"/>
          </div>
        </div>
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-2 text-right">
            <label > <span>*</span>借用原因:</label>
          </div>
          <div class="ui-grid-col-8">
            <textarea  name="remarks" pInputTextarea type="text" [(ngModel)]="borrowData.remarks" readonly></textarea>
          </div>
        </div>
        <div class="ui-grid-row margin-bottom-1vw" *ngIf="borrowData.status !=='新建' && borrowData.status !=='待审批'">
          <div class="ui-grid-col-2 text-right">
            <label > <span>*</span>审批意见:</label>
          </div>
          <div class="ui-grid-col-8">
            <textarea  name="approval_opinions" pInputTextarea type="text" [(ngModel)]="borrowData.approve_remarks" readonly></textarea>
          </div>
        </div>
      </div>
    </p-panel>

  </form>
  <form *ngIf="viewState === 'outbound' " >
    <p-panel >
      <p-header>
        <div class="ui-helper-clearfix">
          <span class="ui-panel-title" style="font-size:16px;display:inline-block;margin-top:2px"></span>
          <button  pButton type="button"  label="返回" (click)="goBack()" [ngStyle]="{'width':'100px'}" ></button>

        </div>
      </p-header>
      <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px" >
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-2 text-right">
            <label >借用单号:</label>
          </div>
          <div class="ui-grid-col-3">
            <input  name="sid"  type="text" pInputText    readonly  value="{{borrowData?.sid}}"  />
          </div>
          <div class="ui-grid-col-2 text-right">
            <label >申请类型:</label>
          </div>
          <div class="ui-grid-col-3">
            <p-dropdown  [options]="statusNames" [autoWidth]="false" name="cycle"  [(ngModel)]="submitData.type"  readonly="true" ></p-dropdown>
          </div>
        </div>
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-2 text-right">
            <label >借用人:</label>
          </div>
          <div class="ui-grid-col-3">
            <input  type="text" pInputText  name="allowed"
                    readonly class="cursor_not_allowed" value="{{personalData.name}}"  />
          </div>
          <div class="ui-grid-col-2 text-right">
            <label >部门名称:</label>
          </div>
          <div class="ui-grid-col-3">
            <input  type="text" pInputText  name="inspectiondepartment"
                    readonly class="cursor_not_allowed" [(ngModel)]="submitData.org" />
          </div>

        </div>
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-2 text-right">
            <label ><span>*</span>借用时间:</label>
          </div>
          <div class="ui-grid-col-3">
            <input   type="text" pInputText  name="create_times"
                     readonly class="cursor_not_allowed"  [(ngModel)]="borrowData.create_time"/>
          </div>
          <div class="ui-grid-col-2 text-right">
            <label ><span>*</span>归还时间:</label>
          </div>
          <div class="ui-grid-col-3">

            <input  type="text" pInputText  name="return_time"
                    readonly class="cursor_not_allowed"  [(ngModel)]="borrowData.return_time"/>
          </div>
        </div>
        <div class="ui-grid-row margin-bottom-1vw">
          <div class="ui-grid-col-2 text-right">
            <label > <span>*</span>借用原因:</label>
          </div>
          <div class="ui-grid-col-8">
            <textarea  name="remarks" pInputTextarea type="text" [(ngModel)]="borrowData.remarks" readonly></textarea>
          </div>
        </div>
        <div class="ui-grid-row margin-bottom-1vw" *ngIf="borrowData.status !=='新建' && borrowData.status !=='待审批'">
          <div class="ui-grid-col-2 text-right">
            <label > <span>*</span>审批意见:</label>
          </div>
          <div class="ui-grid-col-8">
            <textarea  name="approval_opinions" pInputTextarea type="text" [(ngModel)]="borrowData.approve_remarks" readonly></textarea>
          </div>
        </div>
      </div>
    </p-panel>
    <label></label>
    <div class="ui-grid-row margin-bottom-1vw" >
      <div class="ui-grid-col-2 ui-g-offset-10 text-right">
        <button pButton  type="button" (click)="sureApproved()" [ngStyle]="{'width':'100px'}" label="出库"  [disabled]="selectInsepections.length === 0"></button>
      </div>
    </div>
  </form>
  <label></label>
  <label><span>*</span>借用列表</label>
  <p-dataTable [value]="inspections" (onLazyLoad)="loadCarsLazy($event)" [lazy]="true" [rows]="10" [paginator]="true"
               [totalRecords]="totalRecords"  [(selection)]="selectInsepections" [editable]="true"  *ngIf="viewState ==='apply'" [rowsPerPageOptions]="[5,10,20]" class="borrowapplication">
    <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
    <p-column  *ngFor="let col of cols" field="{{col.field}}" header="{{col.header}}" [editable]="col.editable"></p-column>
    <ng-template pTemplate="emptymessage" >
      当前没有数据
    </ng-template>
  </p-dataTable>
  <p-dataTable [value]="editInspections" (onLazyLoad)="editloadCarsLazy($event)" [lazy]="true" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[5,10,20]"
               [totalRecords]="totalRecords"  [(selection)]="selectInsepections" [editable]="true" *ngIf="viewState === 'update'"class="update">
    <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
    <p-column  *ngFor="let col of update" field="{{col.field}}" header="{{col.header}}" [editable]="col.editable"></p-column>
    <ng-template pTemplate="emptymessage">
      当前没有数据
    </ng-template>
  </p-dataTable>
  <p-dataTable [value]="editInspections" (onLazyLoad)="editloadCarsLazy($event)" [lazy]="true" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[5,10,20]"
               [totalRecords]="totalRecords"  [(selection)]="selectInsepections"  *ngIf="viewState === 'viewDetail'">
    <!--<p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>-->
    <p-column  *ngFor="let col of coles" field="{{col.field}}" header="{{col.header}}" [editable]="col.editable"></p-column>
    <ng-template pTemplate="emptymessage">
      当前没有数据
    </ng-template>
  </p-dataTable>
  <p-dataTable [value]="editInspections" (onLazyLoad)="editloadCarsLazy($event)" [lazy]="true" [rows]="10" [paginator]="true"
               [totalRecords]="totalRecords"  [(selection)]="selectInsepections"  *ngIf="viewState === 'someReturn'"  [editable]="true" class="someReturn">
    <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
    <p-column  *ngFor="let col of somecols" field="{{col.field}}" header="{{col.header}}" [editable]="col.editable"></p-column>
    <ng-template pTemplate="emptymessage">
      当前没有数据
    </ng-template>
  </p-dataTable>
  <p-dataTable [value]="editInspections" (onLazyLoad)="editloadCarsLazy($event)" [lazy]="true" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[5,10,20]"
               [totalRecords]="totalRecords"  [(selection)]="selectInsepections" [editable]="true" *ngIf="viewState === 'outbound'"  class="outbound" >

    <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
    <p-column  *ngFor="let col of updatecols" field="{{col.field}}" header="{{col.header}}" [editable]="col.editable"></p-column>
    <ng-template pTemplate="emptymessage">
      当前没有数据
    </ng-template>
  </p-dataTable>
  <label></label>
  <div class="ui-grid-row margin-bottom-1vw" >
    <div class="ui-grid-col-2 ui-g-offset-10 text-right">
      <button pButton  type="submit" label="归还" *ngIf=" viewState == 'someReturn'" [disabled]="selectInsepections.length===0" (click)="returnBorrow()"></button>
    </div>
  </div>
</div>

<app-borrow-items
  *ngIf="showBorrowItems"
  (closeBorrowItemsMask)="closeBorrowItemsMask($event)"
  (addDev)="addDev($event)"
></app-borrow-items>


